<?php

use yii\helpers\Url;
use yii\helpers\Html;
use website\helpers\Render;
use common\models\Design;
use common\models\Recruit;
use common\models\UserCollection;

$this->title = '岗位搜索';
?>
<style>
    #info-search {padding:40px 20px 20px 20px;line-height:30px;}
    #info-search .form-item {margin-bottom:20px;}
    #info-search .input-title {display:block;float:left;width:110px;background-color:#f00;text-align:center;color:#fff;}
    #info-search .input-block {position:relative;margin-left:130px;}
    #info-search .moderate .flyer-choise {width:93px;}
    #info-search .moderate .flyer-choise label {width:70px;padding-left:23px;background-position-x:4px;}

    #info-table td {padding:10px;}
    #info-table td .flyer-status {margin-right:0 !important;}
    #info-table .docker {position:relative;}
    #info-table .docker .collection-data {position:absolute;top:0;right:0;display:none;}
    #info-table tr:hover .docker .collection-data {display:block;}

    #user-photo {padding:20px 0;}
    #user-photo .imager {width:200px;height:200px;margin:0 40px;border-radius:200px;overflow:hidden;}
    #user-photo .imager img {width:100%;height:100%;border:none;}
    #user-photo .username {margin-top:10px;line-height:30px;font-size:16px;text-align:center;}
</style>

<div class="contenter">

    <?= $this->render('/layouts/break-crumbs') ?>

    <div class="box-shadow" id="info-search">
        <div class="form-item">
            <div class="input-title">行业类型</div>
            <div class="input-block flyer-choise-conter moderate red-choise"><?= Render::radio('categories', $categories, null, ['prompt' => '不限', 'class' => 'tabler']) ?></div>
        </div>
        <div class="form-item">
            <div class="input-title">设计类型</div>
            <div class="input-block flyer-choise-conter moderate red-choise"><?= Render::radio('models', $models, null, ['prompt' => '不限', 'class' => 'tabler']) ?></div>
        </div>
        <div class="form-item">
            <div class="input-title">设计风格</div>
            <div class="input-block flyer-choise-conter moderate red-choise"><?= Render::radio('styles', Design::$styleSelector, null, ['prompt' => '不限', 'class' => 'tabler']) ?></div>
        </div>
    </div>
    <div class="clear mt-20px pb-20px">
        <div class="box-shadow w-900px fl">
            <div class="flyer-table simple">
                <table id="info-table" cellspacing="0" cellpadding="0">
                    <tbody>
                    <tr><td colspan="2"><i class="icon-search"></i> 数据加载中，请稍后.</td></tr>
                    </tbody>
                </table>
            </div>
            <div class="flyer-page mt right" id="info-page"><div class="html mr-10px"></div></div>
        </div>
        <div class="w-280px fr">
            <div class="box-shadow mb-20px" id="user-photo">
                <div class="imager"><a href="<?= Url::to('@web/user/photo') ?>"><img src="<?= Render::upload(\Yii::$app->getUser()->photo) ?>"></a></div>
                <div class="username">
                    <p><?= \Yii::$app->getUser()->nickname ?></p>
                    <p class="mt-10px">
                        <a class="flyer-button normal border-round narrow" href="<?= Url::to('@web/designer/index') ?>">进入工作台</a>
                        <a class="flyer-button normal border-round narrow ml-20px" href="<?= Url::to('@web/designer/recruit-applicant-list') ?>">查看我的投递</a>
<!--                        <a class="flyer-button normal border-round narrow ml-20px" href="--><?//= Url::to('@web/designer/recruit-list') ?><!--">查看我的投递</a>-->
                    </p>
                </div>
            </div>
            <?= $this->render('/right-simple/article') ?>
            <?= $this->render('/right-simple/recruit') ?>
        </div>
    </div>
</div>
<div style="display:none;">
    <?= Render::select('', Recruit::$typeSelector, null, ['id' => 'recruit-type']) ?>
    <?= Render::select('', Recruit::$budgetSelector, null, ['id' => 'recruit-budget']) ?>
    <?= Render::select('', $categories, null, ['id' => 'categories']) ?>
    <?= Render::select('', Design::$styleSelector, null, ['id' => 'styles']) ?>
</div>

<script src="<?= Render::static('art-template/template.js') ?>"></script>
<script src="<?= Render::static('flyer/flyer.class.js') ?>"></script>
<script src="<?= Render::static('flyer/checker.class.js') ?>"></script>
<script src="<?= Render::static('flyer/tabler.class.js') ?>"></script>
<script src="<?= Render::static('flyer/tableHandler.class.js') ?>"></script>
<script>
    var tablerClass = new tabler();
    $(document).ready(function() {
        // 表单美化
        (new flyer).init({form: '#info-search'});

        // 初始化表格异步加载事件
        tablerClass.init({
            // 请求地址
            url: '<?= Url::to('@web/search/recruit') ?>',
            // 数据渲染配置
            table: '#info-table', page: '#info-page', template: 'info-template', search: '#info-search', readyCall: true,
            // param => tabler
            afterPost: function(param) {
                // 名称显示
                var lists = [['.type', '#recruit-type'], ['.budget', '#recruit-budget'], ['.categories', '#categories'], ['.styles', '#styles']];
                for(var i = 0; i < lists.length; ++i) {
                    tableHandler.renderCategory({ category: $(param.tabler).find(lists[i][0]), select: lists[i][1], color: false, splite: '，' });
                }
                // 投递简历
                tableHandler.requestSingle({
                    button: '.delivery-data', isConfirm: true, isShadow: false,
                    url: "<?= Url::to('@web/designer/recruit-applicant') ?>",
                    requestSuccess: function (param) {
                        layer.alert(param.response.message, { icon: 6 }, function() {
                            $(param.mthis).after('<span class="flyer-status green">已投递</span>');
                            $(param.mthis).remove();
                            layer.closeAll();
                        });
                    }
                });
                // 初始化 收藏按钮事件
                tableHandler.requestSingle({
                    button: $(param.tabler).find('.collection-data'), url: "<?= Url::to('@web/user/collection') ?>", isConfirm: false,
                    beforePost: function(params) {
                        params.data = { handle: $(params.mthis).attr('data-handle'), id: $(params.tr).attr('data-id'), type: '<?= UserCollection::TypeRecruit ?>' };
                    },
                    requestSuccess: function(params) {
                        if($(params.mthis).attr('data-handle') == 'collection') {
                            $(params.mthis).attr('data-handle', 'revoke').html('取消收藏');
                        }
                        else {
                            $(params.mthis).attr('data-handle', 'collection').html('加入收藏');
                        }
                    }
                });
            }
        });
        $('#info-search .flyer-choise input').bind('change', function() {
            tablerClass.load();
        });
    });
</script>
<script id="info-template" type="text/html">
    {{if infos != undefined && infos.length}}
    {{each infos as info key}}
    <tr id="tr-{{info.id}}" data-id="{{info.id}}">
        <td class="first">
            <p><a href="<?= Url::to('@web/seer/recruit?id=') ?>{{info.id}}">{{info.title}}</a></p>
            <p>
                <span class="w-180px inline-block">发布日期：{{info.created_at | dateShow: format = 'day'}}</span>
                <span class="w-180px inline-block">薪资：<span class="budget">{{info.budget}}</span></span>
                <span class="w-180px inline-block">行业类型：<span class="categories">{{info.categories}}</span></span>
                <span class="inline-block">风格：<span class="styles">{{info.styles}}</span></span>
            </p>
        </td>
        <td class="tar">
            <p class="docker">
                <i class="icon-double-angle-right"></i> <span class="type">{{info.type}}</span>
                {{if collection[info.id]}}
                <button class="collection-data flyer-button normal border-round narrow thin" data-handle="revoke">取消收藏</button>
                {{else}}
                <button class="collection-data flyer-button normal border-round narrow thin" data-handle="collection">加入收藏</button>
                {{/if}}
            </p>
            {{if delivery[info.id]}}
            <p><span class="flyer-status green">已投递</span></p>
            {{else}}
            <p><button class="delivery-data flyer-button normal border-round narrow thin">投递简历</button></p>
            {{/if}}
        </td>
    </tr>
    {{/each}}
    {{else}}
    <tr>
        <td class="first" colspan="2"><i class="icon-ban-circle"></i> 搜索程序未为您搜索到任何信息！</td>
    </tr>
    {{/if}}
</script>